<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>考核管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../library/layui/css/layui.css" media="all">       <!-- layui依赖 -->
    <script type="text/javascript" src="../../library/layui/layui.js"></script>
    <script src="../../lib/axios.min.js"></script>                                     <!-- axios-->
    <script src="../../lib/vue.min.js"></script>                                       <!--vue依赖 -->
    <link rel="stylesheet" href="../../library/element-ui/lib/theme-chalk/index.css">  <!--elementui依赖 -->
    <script src="../../library/element-ui/lib/index.js"></script>
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            height: 675px;
        }

        /*.el-main {*/
        /*    background-color: #E9EEF3;*/
        /*    color: #444;*/
        /*    text-align: center;*/
        /*    line-height: 160px;*/
        /*    padding: 0;*/
        /*    margin: 0;*/
        /*}*/

        /* 修改后关键样式 */
        .el-main {
            background-color: #E9EEF3;
            color: #444;
            padding: 0;
            margin: 0;
            line-height: normal;
            display: flex;
            flex-direction: column;
            height: 675px;
        }

        .el-table__header-wrapper {
            height: 0;   /*消除列名占用空间*/
            width: 100%;
        }

        el-tabs {
            height: 100% !important;
            background-color: transparent;
        }

        .el-tabs__header {
            margin: 0;
            /*padding: 1.5px 10px;*/
            padding-top: 7px;
            padding-left: 10px;
            height: 40px !important;
        }

        .el-tabs__nav-scroll {
            height: 40px !important;
            /*background-color: #1e9fff;*/
            padding: 0;
            margin:0;
        }

        .el-tabs__content {
            flex: 1;
            padding: 0px; /* 按需增加内容间距 */
            overflow-y: auto;
        }
        /*!* 新增的样式 *!*/
        /*.el-tabs__header {*/
        /*    padding: 0;   !* 设置标签头的内边距为0 *!*/
        /*    margin: 0;    !* 设置外边距为0 *!*/
        /*    height: 100px; !* tab content 和顶端的距离 *!*/
        /*}*/

        /*.el-tabs {*/
        /*    height: 1px;*/
        /*    background-color: #13ce66;*/
        /*    padding-top: 0;*/
        /*    margin-top: 0;*/
        /*}*/

        /*.el-tabs__new-tab{*/
        /*    display: none !important;  !* 隐藏增加图标*!*/
        /*}*/

        /*.el-tabs__nav-scroll{*/
        /*    background-color:#1e9fff;*/
        /*    height: 100px;*/
        /*}*/

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px">
                <el-table
                        ref="singleTable"
                        :data="tableData"
                        highlight-current-row
                        @current-change="handleCurrentChange"
                        @row-click="whenClick"
                        style="width: 100%">
                    <el-table-column
                            prop="CNAME"
                            label="菜单"
                            width="200px">
                    </el-table-column>
                </el-table>
                <div style="margin-top: 20px">
                    <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
                    <el-button @click="setCurrent()">取消选择</el-button>
                    <el-button size="small" @click="handleTabsEdit()">add tab</el-button>
                    <el-button @click="OpenWY()">打开网页</el-button>
                </div>
            </el-aside>



            <el-main>
                <el-tabs v-model="editableTabsValue" type="card"  editable @edit="handleTabsEdit">
                    <el-tab-pane
                            :key="item.name"
                            v-for="(item, index) in editableTabs"
                            :label="item.title"
                            :name="item.name"
                            :closable="item.name !== 'home'"
                    >
                    <iframe v-if="item.url" :src="item.url" style="width: 100%; height:620px; border: none;"></iframe>
                    <div v-else>{{ item.content }}</div>
                    </el-tab-pane>
                </el-tabs>

                <el-drawer
                        :visible.sync="table"
                        direction="rtl"
                        size="50%">
                    <el-table :data="erjiMeuData">
                        <el-table-column property="CNAME" label="菜单名称" width="150"></el-table-column>
                        <el-table-column label="二级文本" width="200">
                            <template slot-scope="scope">
                                <div v-if="scope.row.isFather === 'true' && scope.row.children">
                                    <div v-for="subItem in scope.row.children" :key="subItem.id" class="sub-item">
                                        <a style="color: #1e9fff" href="" @click="OpenNew()"> {{ subItem.CNAME }} </a>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-drawer>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
</html>

<script>
    new Vue({
        el: '#app', // 挂载 Vue 实例
        data() {
            return {
                tableData: [],
                currentRow: null,
                drawer: false,
                table: false,
                erjiMeuData: [],
                editableTabsValue: '1',
                editableTabs: [{
                    title: '工作台',
                    name: 'home',
                    content: '敬请期待',
                }],
                tabIndex: 1
            }
        },
        created() {  //钩子函数
            this.getMeuData();
            this.OpenHome();
        },
        methods: {
            handleTabsEdit(targetName, action) {
                // 新增按钮点击处理逻辑
                if (typeof action === 'undefined') {
                    action = 'add'
                    targetName = ++this.tabIndex + ''
                }

                if (action === 'add') {
                    const newTab = {
                        title: `标签页 ${this.tabIndex}`,
                        name: targetName,
                        content: `新标签内容 ${this.tabIndex}`
                    };
                    this.editableTabs.push(newTab);
                    this.editableTabsValue = targetName;
                    this.tabIndex++;
                }
                if (action === 'remove') {
                    // 阻止删除工作台标签页
                    if (targetName === 'home') return;
                    let tabs = this.editableTabs;
                    let activeName = this.editableTabsValue;
                    if (activeName === targetName) {
                        tabs.forEach((tab, index) => {
                            if (tab.name === targetName) {
                                let nextTab = tabs[index + 1] || tabs[index - 1];
                                if (nextTab) {
                                    activeName = nextTab.name;
                                }
                            }
                        });
                    }

                    this.editableTabsValue = activeName;
                    this.editableTabs = tabs.filter(tab => tab.name !== targetName);
                }
            },
            OpenHome(){
                const newTabName = `tab-${this.tabIndex}`;
                const newTab = {
                    title: 'home',
                    name: 'TabHome',
                    url: '/pages/news/news.html' // 存储 URL
                };
                this.editableTabs.push(newTab);
                this.editableTabsValue = newTabName;
                this.tabIndex++;
            },
            OpenWY(){
                const newTabName = `tab-${this.tabIndex}`;
                const newTab = {
                    title: '百度',
                    name: newTabName,
                    url: 'https://www.baidu.com' // 存储 URL
                };
                this.editableTabs.push(newTab);
                this.editableTabsValue = newTabName;
                this.tabIndex++;
            },
            OpenNew() {
                // 打开新链接的逻辑
            },
            closeDrawer() {
                this.table = false; // 关闭抽屉框
            },
            openDrawer() {
                this.table = true;
            },
            getMeuData() {
                axios.get('/getMeu')
                    .then(response => {
                        this.tableData = response.data;
                    })
                    .catch(error => {
                        console.error('请求表格数据失败', error);
                    });
            },
            setCurrent(row) {
                this.$refs.singleTable.setCurrentRow(row);
                this.currentRow = row; // 保存当前选中的行
            },
            whenClick(row) {
                if (row.fatherCode == null || row.fatherCode == "") {
                    row.fatherCode = 0;
                }
                axios.get('/getMeuSonAndSon', { // 刷新二级菜单目录
                    params: {
                        fatherCode: row.CID
                    }
                }).then(response => {
                    console.log(response.data);
                    this.erjiMeuData = response.data;
                    this.openDrawer();
                });
            },
            handleCurrentChange(val) {
                this.currentRow = val;
            }
        }
    });
</script>
